Ext.ns('TaxonTagger');
TaxonTagger.gridpanel = function(config){
	var data = [
			{name: 'offset', mapping: 'offset'}
		,	{name: 'orig', mapping: 'orig'}
		,	{name: 'full', mapping: 'full'}
		,	{name: 'source', mapping: 'source'}
		,	{name: 'verbatim', mapping: 'verbatim'}
		,	{name: 'id', mapping: 'id'}
		,	{name: 'Ct', mapping: 'Ct'}
	];
	
	var pagesize = 30;
	var store = new Ext.ux.data.PagingJsonStore({  
			fields: data
		,	lastOptions: {params: {start: 0, limit: pagesize}}	
	});

	
	this.pagingBar = new Ext.PagingToolbar({
			pageSize: pagesize
		,	displayInfo: true
		,	emptyMsg: 'No data to display.'
		,	store: store
	});		
	var expander = new Ext.ux.grid.RowExpander({
		tpl: new Ext.XTemplate(
			'<div><hr/><b>id:</b> {id}<div>'
			+ '<div><b>Scientific Name :</b> {orig}<div>'
			+ '<div><b>Verbatim :</b> {verbatim}<div>'
			+ '<div><b>Comment :</b> {Ct}<hr/><div>'
		)
	});

	var columns = [
			expander
		,	{header: 'Scientific Name', id:'sciName', width: 120, sortable: true, dataIndex: 'orig'}
		,	{header: 'Species Full', width: 120, sortable: true, dataIndex: 'full'}
		,	{header: 'Found By', width: 60, sortable: true, dataIndex: 'source'}
		,	{header: 'Comments', width: 100, sortable: true, dataIndex: 'Ct'}
	]

	this.sm =	new Ext.grid.RowSelectionModel({
		singleSelect: true
	,	listeners: {
	            rowselect: function(sm, row, rec) {
					  // rec.data.orig
	            }
	        }
		
	});
	
	Ext.apply(this, config, {
			title: 'Grid View'
		,	id: 'gridpanel'	
		,	store: store
		,	columns: columns
		,	sm: this.sm
		,	plugins: expander
		,	animCollapse: false
		,	bbar: this.pagingBar
	});

	TaxonTagger.gridpanel.superclass.constructor.call(this, config);

};

Ext.extend(TaxonTagger.gridpanel, Ext.grid.GridPanel, {});